// npm list -g sass
/*
npm install -g sass
*/
/*
编译scss: sass style.scss style.css
监听文件变化并自动编译scss: sass --watch style.scss style.css
*/

/*导入外部scss文件*/
@import './fragment.scss';

html,body,div,span,table,tr,th,td,li,ol {
    margin: 0;
    padding: 0;
}

/* 变量:
Sass 变量使用 $ 符号开头
*/
$theme-main-color: #17C18E;
$theme-background-color: #EEE;

$fontsize-24: 24px;
$fontsize-20: 20px;
$fontsize-18: 18px;
$fontsize-16: 16px;
$fontsize-14: 14px;
$fontsize-12: 12px;

$side-bottom: bottom;

/* 插值语法: 
在选择器和属性名中使用 Scss 的变量 使用  意味着，
靠近它的运算符都将被视为纯 CSS，这可以避免各种运算。
*/

/* 嵌套中的父级选择器 &
只能在嵌套内部使用父级选择器，否则SCSS找不到父级元素会直接报错。
在各种伪类选择器中，父级选择器是十分常用的
*/

.main_container {
    margin: 20px;
    padding: 10px;
    background-color: $theme-main-color;
    color: white;
    // 演示嵌套功能
    .title {
        font-size: $fontsize-24;
    }
    .title2 {
        font-size: $fontsize-20;
        color: $title2color;
    }
    .middle {
        font-size: $fontsize-16;
    }
    .tail {
        // 演示属性名拼凑
        bg-#{$side-bottom}: 1px solid #33a482;
        height: 30px;
        text-align: center;
        // 演示在嵌套代码中使用 & 引用父元素
        &:hover {
            background-color: aqua;
        }
    }
    .half_title {
        // 演示计算功能
        font-size: 24px / 2;
    }
}

/* 混合器（函数）
声明函数 @mixin
使用函数 @include
*/

@mixin bg-radius-5-red {
    -moz-bg-radius: 5px;
    -webkit-bg-radius: 5px;
    bg-radius: 5px;
    background-color:red;
}
// 有参数并带有默认值
@mixin get-bg-radius($bg-radius:5px, $color:red) {
    -moz-bg-radius: $bg-radius;
    -webkit-bg-radius: $bg-radius;
    bg-radius: $bg-radius;
    background-color:$color;
}
// 函数插槽
@mixin border-colors($color) {
    border: 2px solid $color;
    @content;
}
// 继承
.mixin_div {
    margin-left: 50px;
    margin-right: 50px;
    height: 50px;
}
.text-center {
    text-align: center;
}
.mixin_1 {
    @extend .mixin_div;
    @include bg-radius-5-red;
}
.mixin_2 {
    @extend .mixin_div;
    @include get-bg-radius($bg-radius: 20px, $color: blue);
}
.mixin_3 {
    // @extend .mixin_div;
    // @extend .text-center;
    @extend .mixin_div, .text-center;
    @include border-colors($color: yellow) {
        background-color: aquamarine;
        color: orange;
    }
}